<template>
  <div>
    <transition :name="transitionName">
      <router-view class="child-view"/>
    </transition>
    <tabbar style="position: fixed;background-color: #fff;line-height:10px;">
      <tabbar-item @on-item-click="changeTab(index)" v-for="(item,index) in tabList" :key="index">
        <router-link slot="label" :to="item.link">
          <span>
            <img slot="icon" :src="index==choseTab?item.urlHover:item.url" style="height:25px;display: block;margin:4px auto 2px">
            <span :style="{color:index==choseTab?'#33bb99':'#333'}">{{item.tabName}}</span>
          </span>
        </router-link>
      </tabbar-item>
    </tabbar>
    <toast v-model="showPositionValue" type="text" :time="1000" is-show-mask :text="toastMsg" :position="position"></toast>
  </div>
</template>

<script>
  import {Tabbar, TabbarItem} from 'vux'
  export default {
    components: {
      Tabbar,
      TabbarItem,
    },
    data() {
      return {
        transitionName:'',
        time1: 0,

        showPositionValue: false, // Toast提示
        position: 'default',
        toastMsg: '',

        tabList:[
          {
            url:'http://dlhz.oss-cn-beijing.aliyuncs.com/supply-app-img/home.png',
            urlHover:'http://dlhz.oss-cn-beijing.aliyuncs.com/supply-app-img/home_hover.png',
            link:'/project0/view1/order',
            tabName:'订单',
          },{
            url:'http://dlhz.oss-cn-beijing.aliyuncs.com/supply-app-img/mine.png',
            urlHover:'http://dlhz.oss-cn-beijing.aliyuncs.com/supply-app-img/mine_hover.png',
            link:'/project0/view2/mine',
            tabName:'我的',
          },
        ],
        choseTab:0
      }
    },
    created(){
      this.getInfo()
    },
    methods:{
      // 获取用户信息
      getInfo(){
        this.config0.get('/supply/appLogin/getLoginInfo', {}).then(res=>{
          if(res.data.code==0){
            this.config0.globalInfo.user = res.data.admin;
          } else {
            if(!this.$router) return;
            this.$router.push('/project0/login');
          }
        })
      },
      // 选择tab
      changeTab(index){
        this.choseTab = index
      },
      // 信息提示
      msg(str){
        this.showPositionValue = true;
        this.position = 'middle';
        this.toastMsg = (str);
      },
    },
    watch: {//使用watch 监听$router的变化
      $route(to, from) {
        //如果to索引大于from索引,判断为前进状态,反之则为后退状态
        if(to.meta.index > from.meta.index){
          //设置动画名称
          this.transitionName = 'slide-left';
        }else{
          this.transitionName = 'slide-right';
        }
      }
    },
    mounted(){
      // websocket连接
      // this.config.wsConnect();
      // this.config.getWs().onmessage = (evt) => {
      //   let info = JSON.parse(evt.data);
      // };
    },
    destroyed(){
    }
  }
</script>

<style>
  a{
    color:#000;
  }
  .vux-tabbar-simple .weui-tabbar__label{
    line-height:18px!important;
  }
</style>
